<template>
  <el-container class="is-fullscreen">
    <el-aside :class="'aside ' + asideMenu()" width="200px" v-if="activeIndex !== '/menu'">
      <el-menu unique-opened :default-active="activeIndex" class="el-menu-vertical-demo" @select="PageSwitching" :background-color="menuColor()" :text-color="menuTextColor()" :active-text-color="menuActiveTextColor()">
        <template v-for="(item, key) in itemChild">
          <el-submenu v-if="item.child.length !== 0" :index="item.name" :key="key">
            <template slot="title">
              <div style="height: 45px;line-height: 45px;">
                <tooltip :copyText="$t(item.name)" :placement="placement" class="wid190">
                </tooltip>
              </div>
            </template>
            <!-- <el-menu-item-group v-for="(itemChChild,keyChChild) in item.child" :key="keyChChild">
              <el-menu-item :index="itemChChild.href">{{itemChChild.name}}</el-menu-item>
            </el-menu-item-group> -->
            <template v-for="(itemChChild, keyChChild) in item.child">
              <el-submenu v-if="itemChChild.child.length !== 0" :index="itemChChild.name" :key="keyChChild">
                <template slot="title">
                  <tooltip :copyText="$t(itemChChild.name)" :placement="placement" class="wid190">
                  </tooltip>
                </template>
                <el-menu-item v-for="(itemMin, keyMin) in itemChChild.child" :key="keyMin" :index="itemMin.href">
                  <template>
                    <tooltip :copyText=" $t(itemMin.name)" :placement="placement" class="wid190">
                    </tooltip>
                  </template>
                </el-menu-item>
              </el-submenu>
              <el-menu-item v-else :index="itemChChild.href" :key="keyChChild">
                <tooltip slot="title" :copyText=" $t(itemChChild.name)" :placement="placement" class="wid190">
                </tooltip>
              </el-menu-item>
            </template>
          </el-submenu>
          <el-menu-item v-else :index="item.href" :key="key">
            <tooltip slot="title" :copyText=" $t(item.name)" :placement="placement" class="wid190">
            </tooltip>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <div class="tagsAndRouterView" id="tagsAndRouterView">
      <tags-view v-if="activeIndex !== '/menu'" class="tagViewMenu" />
      <el-main id="main-height" class="main-height">
        <!--------------  标签页-------------->
        <!-- <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="changTab">
        <el-tab-pane v-for="(item, index) in editableTabs" :key="index" :label="item.title" :name="item.name" />

      </el-tabs> -->

        <!--   三级子页面  -->
        <!-- <keep-alive :include="cachedViews" v-if="isRouterAlive"> -->
        <router-view :include="cachedViews" v-if="isRouterAlive" :key="key" :style="activeIndex === '/menu' ? 'margin-top:0px;' : 'margin-top:40px;'" />
        <!-- </keep-alive> -->
        <errorTools v-if="errorToolsDialog" ref="refErrorToolsDialog"></errorTools>
      </el-main>
    </div>
  </el-container>

</template>

<script>
import errorTools from './errorTools/index.vue'
import TagsView from './TagsView/index.vue'
import { getOem } from '@/utils/auth'
import Middle from '@/utils/middle.js'
export default {
  name: 'LeftMenu',
  components: { TagsView, errorTools },
  computed: {
    cachedViews () {
      return this.$store.state.tagsView.cachedViews
    },
    key () {
      return this.$route.path
    }
  },
  props: [
    'itemChild'
  ],
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      placement:'right',
      activeIndex: '',
      editableTabs: [],
      editableTabsValue: '',
      isRouterAlive: true,
      Oem_name: getOem(),
      wanganStylelist: ['tiandun', 'wangan'],
      errorToolsDialog: false,
      blueStyleList: ['lvmeng', 'yinke']
    }
  },
  watch: {
    '$route.path': {
      handler (newVal) {
        this.activeIndex = newVal
        this.editableTabsValue = newVal
        // console.log(this.activeIndex)
        if (this.editableTabs.length <= 1) {
          let newTabs = {}
          this.itemChild.forEach((item) => {
            if (item.child.length !== 0) {
              item.child.forEach((itemch) => {
                if (itemch.href === this.$route.path) {
                  newTabs.title = itemch.name
                }
              })
            } else {
              if (item.href === this.$route.path) {
                newTabs.title = item.name
              }
            }
          })
          newTabs.name = this.$route.path
          this.editableTabs[0] = newTabs
        }
      },
      immediate: true
    }
  },
  created () {
    // console.log(this.itemChild)
  },
  mounted () {
    const _that = this
    Middle.$on('showErrorList', data => {
      _that.showErrorList(data)
    })
    // let scheight = window.innerHeight
    // let scwidth = window.innerWidth
    // document.getElementById('main-height').style.height = scheight - 60 + 'px'
    // document.getElementById('main-height').style.width = scwidth - 200 + 'px'
  },
  methods: {
    // 刷新
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },
    // tab点击选中事件
    changTab (data) {
      // 拿到当前tab页签的数据 根据name拿到对象
      if (this.$route.fullPath !== data.name) {
        this.$router.push(data.name)
      }
    },
    // 点击左侧导航栏
    PageSwitching (val, path, component) {
      // 生成新的标签页信息
      var newTarget = {
        title: component.$el.innerText,
        name: val
      }
      // 判断当前页面值
      if (this.activeIndex !== val) {
        this.activeIndex = val
        this.$router.push(val)
      } else {
        this.reload()
      }

      // 判断是否存在
      if (this.editableTabs.findIndex(item => item.title === newTarget.title) === -1) {
        // 增加到标签页中
        this.editableTabs.push(newTarget)
        // 设置选中
        this.editableTabsValue = val
      }
    },
    // 删除标签页
    removeTab (targetName) {
      let tabs = this.editableTabs
      if (tabs.length !== 1) {
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }

        this.editableTabsValue = activeName
        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
        this.$router.push(this.editableTabsValue)
      }
    },
    showErrorList (data) {
      this.errorToolsDialog = true
      this.$nextTick(() => {
        this.$refs.refErrorToolsDialog.init(data)
      })
    },
    menuStyle () {
      if (this.Oem_name === 'huanyu') {
        return { backgroundImage: 'url(' + require(`../assets/img/huanyuLeftMenu.png`) + ')', backgroundPosition: 'center' }
      }
    },
    menuColor () {
      // 1D3250 393D49
      if (this.wanganStylelist.includes(this.Oem_name)) {
        return '#1D3250'
      } else if (this.blueStyleList.includes(this.Oem_name)) {
        return '#dddddd'
      } else if (this.Oem_name === 'huanyu') {
        return 'rgba(255, 255, 255, 0)'
      } else {
        return '#393D49'
      }
    },
    menuTextColor () {
      if (this.wanganStylelist.includes(this.Oem_name)) {
        return '#CCCCCC'
      } else if (this.blueStyleList.includes(this.Oem_name)) {
        return '#000'
      } else if (this.Oem_name === 'huanyu') {
        return '#fff'
      } else {
        return '#fff'
      }
    },
    menuActiveTextColor () {
      if (this.wanganStylelist.includes(this.Oem_name)) {
        return '#fff'
      } else if (this.blueStyleList.includes(this.Oem_name)) {
        return '#fff'
      } else if (this.Oem_name === 'huanyu') {
        return '#000'
      } else {
        return '#009966'
      }
    },
    asideMenu () {
      if (this.wanganStylelist.includes(this.Oem_name)) {
        return 'asideTiandunMenu'
      } else if (this.blueStyleList.includes(this.Oem_name)) {
        return 'asideLvmengMenu'
      } else if (this.Oem_name === 'huanyu') {
        return 'asideHuanyuMenu'
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped>
.aside {
  background-color: #393d49;
  padding: 0;
  height: calc(100vh - 60px);
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  margin-bottom: 0px;
  overflow-x: hidden;
}
.aside::-webkit-scrollbar {
  width: 0 !important;
}

.el-menu {
  border: none;
}

.el-menu-item {
  /* padding: 0 !important; */
  min-width: 0px;
  height: 45px;
  line-height: 45px;
}
</style>
<style lang='scss'>
.el-submenu__title {
  height: 45px !important;
  line-height: 45px !important;
}

.tagsAndRouterView {
  /* width: calc(100% - 200px); */
  width: 100%;
  height: calc(100vh - 60px);
  position: relative;
}

.main-height {
  position: absolute;
  height: calc(100vh - 60px) !important;
  overflow-x: hidden;
  width: 100%;
  padding: 15px;
}

.tagViewMenu {
  z-index: 1003;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(10px);
}
// 天盾样式
.asideTiandunMenu {
  background: #1d3250 !important;
  .el-menu-item:hover {
    background: #003366 !important;
    color: #fff !important;
  }
  .el-submenu__title:hover {
    background: #003366 !important;
    color: #fff !important;
  }
  .el-menu-item.is-active {
    background: #003366 !important;
  }
  .el-submenu__title.is-active {
    background: #003366 !important;
  }
  .is-opened {
    .el-submenu__title {
      color: #fff !important;
    }
  }
}
// 9a9a9a
.asideLvmengMenu {
  background: #dddddd !important;
  .is-opened {
    .el-menu-item {
      background-color: #eeeeee !important;
    }
    .el-menu-item::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 45px;
      background-color: #9a9a9a !important;
    }
  }
  .el-menu-item:hover {
    background: #387ed3 !important;
    color: #fff !important;
  }
  .el-submenu__title:hover {
    background: #387ed3 !important;
    color: #fff !important;
  }
  .el-menu-item.is-active {
    background: #387ed3 !important;
  }
  .el-submenu__title.is-active {
    background: #387ed3 !important;
  }
}
.asideHuanyuMenu {
  background-image: url("../assets/img/huanyuLeftMenu.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover;
  .is-opened {
    .el-menu-item {
      background-color: rgba(255, 255, 255, 0) !important;
    }
    .el-menu-item::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 45px;
      background-color: rgba(255, 255, 255, 0) !important;
    }
  }
  .el-menu-item:hover {
    background: rgba(255, 255, 255, 1) !important;
    color: #000 !important;
  }
  .el-submenu__title:hover {
    background: rgba(255, 255, 255, 1) !important;
    color: #000 !important;
  }
  .el-menu-item.is-active {
    background: rgba(255, 255, 255, 1) !important;
  }
  .el-submenu__title.is-active {
    background: rgba(255, 255, 255, 1) !important;
  }
}
</style>
